<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云文档实时多人在线编辑器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>实时多人在线编辑器</h1>
        
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" placeholder="输入用户名" v-model="username">
        </div>
        
        <div>
            <label for="avatar">头像上传:</label>
            <input type="file" id="avatar" @change="handleAvatarChange">
        </div>
        
        <div>
            <label for="editor">编辑内容:</label>
            <textarea id="editor" rows="10" cols="50" v-model="editorContent"></textarea>
        </div>
        
        <div>
            <button @click="saveContent">保存</button>
            <button @click="undo" :disabled="undoStack.length <= 1">撤回</button>
        </div>
        
        <div>
            <h2>操作日志</h2>
            <ul id="log">
                <li v-for="(log, index) in logs" :key="index">{{ log }}</li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                username: '',
                editorContent: '',
                file: 'index.txt',
                logs: [],
                socket: null,
                undoStack: [] // 用于存储编辑历史状态
            },
            methods: {
                handleAvatarChange(event) {
                    // 处理头像上传逻辑
                    // ...
                },
                saveContent() {
                    const data = {
                        content: this.editorContent,
                        username: this.username,
                        avatar: '', // 根据实际逻辑设置头像链接
                        file: this.file
                    };

                    this.socket.send(JSON.stringify(data));
                    this.addToUndoStack(this.editorContent);
                },
                addToUndoStack(content) {
                    if (this.undoStack.length >= 20) {
                        this.undoStack.shift();
                    }
                    this.undoStack.push(content);
                },
                undo() {
                    if (this.undoStack.length > 1) {
                        this.undoStack.pop();
                        this.editorContent = this.undoStack[this.undoStack.length - 1];
                        this.saveContent();
                    }
                }
            },
            watch: {
                editorContent(editorContent, oldEditorContent) {
                    if (editorContent !== oldEditorContent) {
                        this.addToUndoStack(oldEditorContent);
                        this.saveContent();
                        console.log('Editor 内容已变化:', editorContent);
                    }
                }
            },
            mounted() {
                this.socket = new WebSocket('ws://localhost:8080');

                this.socket.onopen = () => {
                    console.log('WebSocket 连接已建立');
                };

                this.socket.onmessage = (event) => {
                    const data = JSON.parse(event.data);
                    if (data.content !== undefined) {
                        this.editorContent = data.content;
                    }
                    if (data.event === 'contentChange') {
                        this.editorContent = data.content;
                    } else if (data.event === 'usernameChange') {
                        this.username = data.username;
                    } else if (data.event === 'fileChange' && data.file === this.file) {
                        // 收到文件变更通知后，可以进行一些界面更新或通知用户
                        console.log('文件内容已更新');
                    }

                    this.logs.push(data.logMessage);
                };

                this.socket.onclose = () => {
                    console.log('WebSocket 连接已关闭');
                };
            }
        });
    </script>
</body>
</html>
